<template>
  <div>
    <el-container>
      <el-header>
        <div class="daohang">
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2" @click="goB">学术动态</el-menu-item>
            <el-menu-item index="3" @click="goC">文献库</el-menu-item>
            <el-menu-item index="4">文件库</el-menu-item>
            <el-menu-item index="5">案例库</el-menu-item>
            <el-menu-item index="4">联系我们</el-menu-item>
            <el-menu-item index="5">关于我们</el-menu-item>
          </el-menu>
        </div>
        <template>
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 4"
                              :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </template>
      </el-header>
      <el-container>
        <el-main>
          <div class="main_two">
            <div class="one">
              <div class="side"></div>
              <div class="main_text">
                <div style="color:rgb(7, 112, 25);font-weight:900;float:left;font-size:20px">学术动态</div>
                <div class="list">
                  <div class="list_img">
                    <div class="list_image"></div>
                    <div class="list_text">
                      <div class="list_textcont">习近平总书记向全国广大高校进行节日的问候和诚挚的总结</div>
                      <div class="list_time">2021-9-9</div>
                    </div>
                  </div>
                  <div class="list_content">
                    <div class="list_text">
                      <div class="list_textcont">我校召开2021年线上管理工作大会的总结</div>
                      <div class="list_time1">2021-9-9</div>
                    </div>
                  </div>
                  <div class="list_content">
                    <div class="list_text">
                      <div class="list_textcont">实习课教室评价表</div>
                      <div class="list_time1">2021-9-9</div>
                      <div>
                        <el-link href="https://element.eleme.io"
                                 target="_blank"
                                 style="margin-top:60px;float:right">>>>More</el-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="two">
              <div class="side1"></div>
              <div class="main_text">
                <div style="display:flex;">
                  <div style="color:rgb(134, 190, 223, 0.973);font-weight:900;float:left;font-size:20px">文献库</div>
                  <div style="margin-top:5px;margin-left:190px">
                    <el-breadcrumb separator="|"
                                   style="font-color:rgb(134, 190, 223, 0.973)">
                      <el-breadcrumb-item :to="{ path: '/' }">国内文献库</el-breadcrumb-item>
                      <el-breadcrumb-item><a href="/">国内文献库</a></el-breadcrumb-item>
                    </el-breadcrumb>
                  </div>
                </div>
                <div class="list_content1">
                  <div><b>为什么都想当老师？教师的AB面</b></div>
                  <div>
                    <p style="text-align:left">近年教师热引发关注，数据显示，学前教育、博士学历、等教师特征人群认为自己不适合教师职业的比例最高</p>
                  </div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-bottom:5px"></div>
                  <div><b>“双一流”建设高校2021级新生数据大揭秘！</b></div>
                  <div>
                    <p style="text-align:left">各大高校相继晒出2021级新生大数据。其中信息显示：2021级新生星座冠军竟是天蝎座、生源最多的省份是河南。</p>
                  </div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-bottom:5px"></div>
                  <div><b>年轻人为什么总把「社死」挂在嘴边？</b></div>
                  <div>
                    <p style="text-align:left">随着“社死”成为网络热词之一，“社死”相关话题也成为今年热搜常客。</p>
                  </div>
                  <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-bottom:5px"></div>
                  <div>
                    <el-link href="https://element.eleme.io"
                             target="_blank"
                             style="margin-top:60px;float:right;margin-left:30px">>>>More</el-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main_one">
            <div class="side3"></div>
            <div class="main_text">
              <div style="display:flex;">
                <div style="color:rgb(190, 44, 7);font-weight:900;float:left;font-size:20px">文件库</div>
                <div style="margin-top:5px;margin-left:620px">
                  <el-breadcrumb separator="|"
                                 style="font-color:rgb(134, 190, 223, 0.973)">
                    <el-breadcrumb-item :to="{ path: '/' }">国家文件</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">升级文件</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">高校文件</a></el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
              </div>
              <div class="list_content1">
                <div><b>中共中央印发《中国共产党工作条例》</b></div>
                <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                <div><b>中共中央印发《中国共产党工作条例》</b></div>
                <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                <div><b>中共中央印发《中国共产党工作条例》</b></div>
                <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                <div><b>中共中央印发《中国共产党工作条例》</b></div>
                <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                <div><b>中共中央印发《中国共产党工作条例》</b></div>
                <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                <div><b>中共中央印发《中国共产党工作条例》</b></div>
                <div style="height:1px;width:100%;background-color:rgb(191, 194, 194);margin-top:10px;margin-bottom:10px"></div>
                <div>
                  <el-link href="https://element.eleme.io"
                           target="_blank"
                           style="margin-top:60px;float:right;margin-left:30px">>>>More</el-link>
                </div>
              </div>
            </div>
          </div>
        </el-main>
        <el-aside width="480px">
          <div class="side2"></div>
          <div class="main_text">
            <div style="display:flex;">
              <div style="color:rgb(224, 238, 30);font-weight:900;float:left;font-size:20px">案例库</div>
              <div style="margin-top:5px;margin-left:250px">
                <el-breadcrumb separator="|"
                               style="font-color:rgb(134, 190, 223, 0.973)">
                  <el-breadcrumb-item :to="{ path: '/' }">正面经验</el-breadcrumb-item>
                  <el-breadcrumb-item><a href="/">负面案例</a></el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </div>
            <div>
              <div style="display:flex;flex-direction: column;align-items: flex-start">
                <div class="vedio"
                     style="margin-top:20px">
                  <img src="../../src/assets/04.jpg"
                       style="width:450px;height:250px;">
                </div>
                <div style="margin-top:40px;text-align:left"><b>石家庄学院党外知识分子参观市委统战部庆祝建党100周年书画展</b></div>
                <div style="display:flex;margin-top:50px;flex-wrap: wrap">
                  <el-tag>热门搜索一</el-tag>
                  <el-tag type="success">热门搜索二</el-tag>
                  <el-tag type="info">热门搜索三</el-tag>
                  <el-tag type="warning">热门搜索四</el-tag>
                  <el-tag type="danger">热门搜索五</el-tag>
                  <el-tag>热门搜索六</el-tag>
                  <el-tag type="success">热门搜索七</el-tag>
                </div>
                <div>
                  <el-link href="https://element.eleme.io"
                           target="_blank"
                           style="margin-top:60px;float:right;margin-left:30px">>>>More</el-link>
                </div>
              </div>
            </div>
          </div>
        </el-aside>
      </el-container>
      <div class="footer">
        <div class="footer_text">
          <el-breadcrumb separator="|">
            <el-breadcrumb-item :to="{ path: '/' }">网站声明</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">联系我们</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">关于我们</a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div style="margin-left:700px;margin-top:5px;font-size:14px;font-weight:900">技术支持：天津职业技术师范大学</div>
      </div>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods: {
    goB () {
      // eslint-disable-next-line standard/object-curly-even-spacing
      this.$router.push({ 'path': '/home/second/son'})
    },
    goC () {
      // eslint-disable-next-line standard/object-curly-even-spacing
      this.$router.push({ 'path': '/home/second/child'})
    }
  }
}
</script>
<style scoped>
.el-header {
  color: #333;
  text-align: center;
  height: 380px !important;
  margin-right: 80px;
}

.el-aside {
  background-color: rgb(255, 255, 255);
  color: #333;
  text-align: center;
  height: 700px;
  margin-left: 20px;
  margin-right: 60px;
  margin-top: 20px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: auto;
}
.daohang {
  height: 50px;
  width: 100%;
}
.el-menu {
  background-color: rgb(237, 238, 238);
  margin-left: 40px;
}
.el-menu-item {
  margin-right: 40px;
  font-weight: 900;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  background-image: url('../../src/assets/img.jpg');
  background-size: 100% 100%;
}
.el-carousel {
  width: 100%;
  margin-left: 40px;
  margin-right: 40px;
}
.main_two {
  display: flex;
  background-color: rgb(237, 238, 238);
  margin-left: 40px;
  height: 500px;
}
.main_one {
  margin-top: 30px;
  background-color: rgb(255, 255, 255);
  margin-left: 40px;
  height: 400px;
}
.one {
  background-color: rgb(255, 255, 255);
  width: 480px;
  height: 500px;
}
.two {
  background-color: rgb(255, 255, 255);
  width: 480px;
  height: 500px;
  margin-left: 40px;
}
.side {
  width: 100%;
  height: 10px;
  background-color: rgb(7, 112, 25);
  border-radius: 4px;
}
.main_text {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.side1 {
  width: 100%;
  height: 10px;
  background-color: rgba(134, 190, 223, 0.973);
  border-radius: 4px;
}
.side2 {
  width: 100%;
  height: 10px;
  background-color: rgb(224, 238, 30);
  border-radius: 4px;
}
.side3 {
  width: 100%;
  height: 10px;
  background-color: rgb(190, 44, 7);
  border-radius: 4px;
}
.footer {
  height: 100px;
  width: 100%;
  background-color: grey;
}
.footer_text {
  margin-left: 700px;
  margin-top: 30px;
}
.list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.list_img {
  background-color: rgb(241, 241, 241);
  width: 100%;
  height: 120px;
  margin-top: 20px;
  display: flex;
}
.list_image {
  background-image: url('../../src/assets/02.jpg');
  height: 100%;
  width: 30%;
}
.list_text {
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
}
.list_textcont {
  font-family: Hiragino Sans GB;
  font-weight: 550;
  text-align: left;
}
.list_time {
  margin-top: 35px;
}
.list_time1 {
  margin-top: 15px;
}
.list_content {
  background-color: rgb(241, 241, 241);
  width: 100%;
  height: 90px;
  margin-top: 20px;
  display: flex;
  text-align: left;
  flex-direction: column;
}
.list_content1 {
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 16px;
}
.el-tag {
  margin-right: 30px;
  font-size: 20px;
  margin-top: 20px;
}
</style>
